<!-- 营业流水 -->
<template>
  <div class="operationflow">
    <van-tabs sticky animated>
      <van-tab title="主营业务">
        <div class="mainTask">
          <div class="inputSearch">
            <div class="search">
              <div class="searchImage">
                <img src="../../assets/images/chaxun.png" width="100%" />
              </div>
              <input
                type="text"
                class="headsearch"
                placeholder="输入车牌号、姓名、手机号查询"
                v-model="mainTaskInputValue"
                @blur="mainTaskSearch"
                @keyup.enter="mainTaskSearch"
              />
            </div>
            <div class="filterBtn" @click="fliterClick">
              <div class="filterImage">
                <img src="../../assets/images/筛选黑色@2x.png" width="100%" />
              </div>
              <div>筛选</div>
            </div>
          </div>
          <div class="mianTaskContent">
						<block v-for="(item,index) in list" :key='index'>
							<div class="card">
								<CardStyle :list='item'></CardStyle>
							</div>
						</block>
            
          </div>
        </div>
      </van-tab>
      <van-tab title="增值业务"> </van-tab>
    </van-tabs>
    <van-popup v-model="filterPop" position="right" :style="{ height: '100%' }">
      <div class="fitlerPop">
        <div class="filterTitle">业务类型</div>
        <div class="typeList">
          <div
            class="rect"
            v-for="(item, index) in businessTypeList"
            :key="index"
            @click="item.Selected = !item.Selected"
            :class="item.Selected ? 'SelectedStyle' : ''"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="filterTitle">支付方式</div>
        <div class="typeList">
          <div
            class="rect"
            v-for="(item, index) in payTypeList"
            :key="index"
            @click="item.Selected = !item.Selected"
            :class="item.Selected ? 'SelectedStyle' : ''"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="filterTitle">时间区间</div>
        <div class="typeListTime">
          <div class="chooseTime" @click="chooseTime('start')">
            {{ time.timeStart ? time.timeStart : "开始时间" }}
          </div>
          <div class="tiemMiddle">-</div>
          <div class="chooseTime" @click="chooseTime('end')">
            {{ time.timeEnd ? time.timeEnd : "结束时间" }}
          </div>
        </div>
        <div class="towBtn">
          <div class="towBtnDetail">
            <div class="reset" @click="resetBtn">重置</div>
            <div class="ensure" @click="ensureBtn">确定</div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 时间选择器弹窗 -->
    <van-popup
      v-model="time.timePicker"
      position="bottom"
      :style="{ width: '100%' }"
    >
      <van-datetime-picker
        v-model="time.currentDate"
        type="date"
        :min-date="time.minDate"
        :max-date="time.maxDate"
        @confirm="timePickerenSure"
        @cancel="time.timePicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import CardStyle from "../../components/CardStyle";
export default {
  components: {
    CardStyle,
  },
  data() {
    return {
			list:'',
      mainTaskInputValue:'',//主营业务搜索框的值
      mainTaskInputValueHistory:'',//主营业务搜索框上次的值，做搜索优化
      filterPop: false, //过滤弹窗层控制
      businessTypeList: [
        //过滤弹窗业务类型列表
        { name: "消费流水", Selected: false,val:1, },
        { name: "办卡流水", Selected: false,val:2, },
        { name: "充值流水", Selected: false,val:3, },
        { name: "拼团收款", Selected: false,val:4 },
        { name: "秒杀收款", Selected: false,val:5 },
        { name: "云货架流水", Selected: false,val:6 },
        { name: "退卡流水", Selected: false,val:7 },
        { name: "拼团退款", Selected: false,val:8 },
      ],
      payTypeList: [
        //过滤弹窗支付方式列表
        { name: "微信支付", Selected: false,type:2 },
        { name: "支付宝支付", Selected: false,type:3 },
        { name: "现金", Selected: false,type:1 },
        { name: "刷卡", Selected: false,type:6 },
        { name: "微信转账", Selected: false,type:5 },
        { name: "支付宝转账", Selected: false,type:4 },
      ],
      businessTypeSelectedIndex: null, //当前业务类型选中的下标
      PayTypeSelectedIndex: null, //当前支付类型选中的下标
      time: {
        minDate: new Date(2020, 0, 1), //时间选择器最小日期
        maxDate: new Date(2025, 10, 1), //时间选择器最大日期
        currentDate: new Date(),
        timePicker: false, //时间选择器弹窗层控制
        timeStart: '', //选择的开始时间
        timeEnd: '', //选择的结束时间
        timeType: "", //当前弹窗是开始时间或结束时间的类型
      },
			beginTime:'',
			endTime:'',
			arr:'',//业务类型
			arr2:'',//支付方式
    };
  },
	created(){
		let merchantCode=localStorage.getItem('merchantCode')||''
		if(merchantCode==''){
			localStorage.setItem('merchantCode',this.$route.query.merchantCode)
		}
		 if(merchantCode!=this.$route.query.merchantCode&&this.$route.query.merchantCode!=undefined){
			localStorage.setItem('merchantCode',this.$route.query.merchantCode)
		}
		this.getList()
	},
  methods: {
		getList(){//主营业务列表
		let params = {
			merchantCode:localStorage.getItem('merchantCode'),
			table:1,//1主营业务 2 增值业务
			orderBusinessType:this.arr,//业务类型  1消费流水，2办卡流水 3充值 4 拼团 5 秒杀 6云店铺 7 办卡退款 8拼团退款 多个逗号分隔
			keyWords:this.mainTaskInputValue,//搜索词
			payType:this.arr2,//支付方式1 现金 2 微信 3 支付宝 4 支付宝转账 5 微信转账 6 刷卡 7 挂账
			beginTime:this.beginTime,//开始时间
			endTime:this.endTime,//结束时间
		}
			this.$api.waterList(params).then(res=>{
				this.list=res.data.records
			})
		},
    //主营业务开始搜索函数
    mainTaskSearch(){
      if( this.mainTaskInputValue!=this.mainTaskInputValueHistory){
        this.mainTaskInputValueHistory=this.mainTaskInputValue;
        this.getList()
      }else{
         console.log('不执行操作')
      }
    },
    //点击筛选按钮
    fliterClick() {
      this.filterPop = !this.filterPop;
      console.log("fliterClick");
    },
    //点击选择时间
    chooseTime(type) {
      this.time.timePicker = true;
      this.time.timeType = type;
    },
    //时间选择器确认按钮
    timePickerenSure(value) {
      value = this.timeFilter(value);
      let { timeType } = this.time;
      if (timeType == "start") {
        this.time.timeStart = value;
      } else {
        this.time.timeEnd = value;
      }
      this.time.timePicker=false;
    },
    //new data()过滤成“年-月-日”格式
    timeFilter(value) {
      let date = new Date(value);
      console.log(date);
      let connector = "-";
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate = year + connector + month + connector + strDate;
      return currentdate;
    },
    //重置按钮
    resetBtn(){
      console.log("reset");
      this.time.timeStart='';
      this.time.timeEnd='';
      this.businessTypeList.forEach(item => {
        item.Selected=false;
      });
      this.payTypeList.forEach(item => {
        item.Selected=false;
      });
    },
    //确认按钮
    ensureBtn(){
			let arr,arr2,arr3=[],arr4=[] 
			arr = this.businessTypeList.filter(val => {
				return val.Selected==true
			})
			arr2 = this.payTypeList.filter(val => {
				return val.Selected==true
			})
			arr.map(val=>{
				arr3.push(val.val)
			})
			arr3=arr3.join(',')
			arr2.map(val=>{
				arr4.push(val.type)
			})
			arr4=arr4.join(',')
			this.arr=arr3||''
			this.arr2=arr4||''
			this.beginTime=this.time.timeStart||''
			this.endTime=this.time.timeEnd||''
			this.getList()
			this.filterPop = !this.filterPop;
    }
  },
};
</script>

<style lang="scss" scoped>
.operationflow {
  /deep/ .van-tabs__wrap.van-hairline--top-bottom {
    height: 110px;
    .van-tab.van-ellipsis {
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #d1d1d1;
      .van-tab__text {
        font-size: 28px;
      }
    }
    .van-tab.van-tab--active.van-ellipsis {
      color: #ef3b4f;
    }
    .van-tabs__line {
      height: 6px;
    }
  }
  // 主营业务
  .mainTask {
    .inputSearch {
			background: #fff;
      height: 130px;
      padding: 0 26px 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .search {
        flex: 1;
        height: 70px;
        background: #f1f1f1;
        display: flex;
        align-items: center;
        border-radius: 35px;
        box-sizing: border-box;
        padding: 0 30px;
				padding-right: 0;
        .searchImage {
          width: 40px;
        }
        .headsearch {
          line-height: normal;
          border: 0;
          background: #f1f1f1;
          font-size: 28px;
          margin: 0 20px;
          width: 100%;
        }
      }
      .filterBtn {
        width: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28px;
        color: #272727;
        .filterImage {
          width: 32px;
          height: 30px;
          padding-right: 14px;
        }
      }
    }
  }
  .mianTaskContent {
    box-sizing: border-box;
    background: #f1f1f1;
    overflow: hidden;
    .card {
      margin: 20px;
    }
  }
  // 点击筛选弹窗
  .fitlerPop {
    height: 100%;
    display: flex;
    flex-direction: column;
    .SelectedStyle {
      background: #ffebed !important;
    }
    .filterTitle {
      padding: 30px 33px;
      font-size: 34px;
      color: #272727;
    }
    .typeList {
      padding: 0 33px;
      display: grid;
      grid-template-columns: repeat(3, auto);
      grid-row-gap: 20px;
      grid-column-gap: 20px;
      .rect {
        height: 80px;
        width: 160px;
        font-size: 28px;
        color: #272727;
        background: #f5f5f9;
        border-radius: 10px;
        line-height: 80px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .typeListTime {
      padding: 0 33px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .chooseTime {
        box-sizing: border-box;
        height: 80px;
        width: 240px;
        border-radius: 10px;
        background: #ffffff;
        border: 1px solid #cdcdcc;
        line-height: 80px;
        text-align: center;
        font-size: 28px;
        color: #272727;
      }
      .tiemMiddle {
        font-size: 40px;
        color: #cdcdcc;
      }
    }
    .towBtn {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .towBtnDetail {
        display: flex;
        border-top: 1px solid #cdcdcd;
        font-size: 32px;
        text-align: center;
        .reset {
          border-right: 1px solid #cdcdcd;
          color: #272727;
          height: 100px;
          width: 50%;
          line-height: 100px;
        }
        .ensure {
          color: #4883c0;
          height: 100px;
          width: 50%;
          line-height: 100px;
        }
      }
    }
  }
}
</style>
